<template>
  <div class="phone7">
    <div ref="chartContainerphone7" style="width: 100%;height: 260px"></div>
  </div>
</template>

<script setup name="phonePage1_7">
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
  popVisible:false,
  popupTitle : '',
})

const chartContainerphone7 = ref(null);
const createCharts = ()=>{
  const chartInstance = echarts.init(chartContainerphone7.value);
  const option = {
    title: {
      text: '2024年3月设备开机率',
      right:'110px',
      textStyle:{
        color:'#0048ff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    series: [
      {
        type: 'gauge',
        radius: "85%",
        center: ["50%", "55%"],
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [0.3, '#fd666d'],
              [0.7, '#37a2da'],
              [1, '#249b9b ']
            ]
          }
        },
        pointer: {
          width:10,
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        splitLine: {
          distance: -30,
          length: 20,
          lineStyle: {
            color: '#fff',
            width: 4
          }
        },
        axisLabel: {
          color: 'inherit',
          distance: 42,
          fontSize: 14
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%',
          color: 'inherit',
          fontSize:16
        },
        data: [
          {
            value: 66.7
          }
        ]
      }
    ]
  };
  chartInstance.setOption(option);
}
onMounted(()=>{
  createCharts();
})
</script>


<style scoped>
.phone7{
  border: 1px solid #32a99e;
}
</style>
